import React, { Component } from 'react';
import {CSSTransition} from 'react-transition-group'
import './transition1.css'

class Transition1 extends Component {
  constructor() {
    super();
    this.state = {
      isShow: true
    }
  }
  render() {
    return (
      <div>
        <button onClick={()=>this.setState({isShow: !this.state.isShow})}>toggle</button>
        {/* {
          this.state.isShow?<div className="div1"></div>:''
        } */}
        {/* in:控制显示隐藏的变量 */}
        {/* timeout:动画的执行时间 */}
        {/* classNames:css样式的class名前缀 */}
        {/* unmountOnExit:离开是销毁组件 */}
        <CSSTransition
          in={this.state.isShow}
          timeout={1000}
          classNames="alert"
          unmountOnExit
        >
          <div className="div1"></div>
        </CSSTransition>
      </div>
    );
  }
}

export default Transition1;
